<template>
	<!-- 补贴历史申请 -->
	<view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="bigbox mt26">
			<u-empty text="申请记录为空" marginTop="100" v-if="!data.length"></u-empty>
			<view class="order-item pl20 pr20 pt32 pb32 mb20" v-for="(item,index) in data" :key="index" @click="">
				<!-- 上面的盒子 -->
				<view class="flex row-between">
					<!-- 左侧的盒子 -->
					<view class="box-left">
						<view class="box-tit">{{item.name}}</view>
						<view class="mt40">
							<text class="box-txt">赔付金额：</text> <text
								class="box-txt2">{{item.price}}</text>
						</view>
						<view class="mt26">
							<text class="box-txt">理赔事由：</text> <text class="box-txt2">{{item.remark}}</text>
						</view>
						<view class="mt26">
							<text class="box-txt">申请时间：</text> <text class="box-txt2">{{item.createtime}}</text>
						</view>
					</view>
					<!-- 左侧的盒子 -->
					<!-- 右侧的盒子 -->
				<!-- 	<view class="box-right">
						<view class="flex row-right">
							<view class="box-tit">{{item.status_text}}</view>
						</view>
						<view class="mt40">
							<text class="box-txt">入职岗位：</text> <text class="box-txt2">{{item.induction_post}}</text>
						</view>
						<view class="mt26">
							<text class="box-txt">入职时间：</text> <text
								class="box-txt2">{{item.induction_time_text}}</text>
						</view>
					</view> -->
					<!-- 右侧的盒子 -->
				</view>
				<!-- /上面的盒子 -->

				<!-- 下面的盒子 -->
				<!-- <view class="flex mt48 row-right">
					<view class="w186 h54 orderBtn mr26" @tap="cancelSubsidy(item.id)"
						v-if="item.state == '0'">取消申请</view>
					<view class="w186 h54 orderBtn" @tap="delSubsidy(item.id)" v-if="item.state=='1' || item.state=='2'">删除申请</view>
				</view> -->
				<!-- 下面的盒子 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '申请中',
					type: 0,
				}, {
					name: '已通过',
					type: 1,
				}, {
					name: '已驳回',
					type: 2,
				},],
				current: 0,
				id: '',
				data: '', //页面列表
				page: 1
			};
		},
		onLoad(e) {
			this.id = e.id
			this.settlementOfClaimsList()
		},
		onReachBottom() {
			this.page++
			this.settlementOfClaimsList()
		},
		methods: {
			cancelSubsidy(id) { 
				//取消申请
				this.$api.cancelSubsidy({
					id
				}).then(res => {
					this.$msg(res.msg)
					this.subsidyList()
				})
			},
			delSubsidy(id) { 
				//删除申请
				this.$api.delSubsidy({
					id
				}).then(res => {
					this.$msg(res.msg)
					this.subsidyList()
				})
			},
			change(index) {
				this.current = index;
				this.settlementOfClaimsList()
			},
			settlementOfClaimsList() {
				let data = {
					state: this.list[this.current].type,
					page: 1,
					size: this.page * 10
				}
				this.$api.settlementOfClaimsList(data).then(res => {
					this.data = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		background-color: #FFFFFF;
		box-shadow: 0px 6rpx 20rpx 0px #E8EAEF;
		border-radius: 14rpx;

		.box-tit {
			font-size: 30rpx;
			color: #FF286A;
		}

		.box-txt,
		.box-txt2 {
			font-size: 21rpx;
			font-weight: 500;
			color: #6D788B;
		}

		.box-txt2 {
			color: #1D2538;
		}
	}

	.orderBtn {
		text-align: center;
		line-height: 52rpx;
		border: 2rpx solid #1385FF;
		border-radius: 10rpx;
		font-weight: 500;
		color: #1385FF;
	}
</style>
